<template>
    <n-space justify="center">
        <n-card v-for="user in top3" :key="user.index" style="width: 500px;">
            <n-space vertical align="center">
                <n-button style="font-size: 50px;" text @click="link2User(user.account)">{{ user.name }}</n-button>
                <n-icon :color="user.color" :size="40">
                    <Medal />
                </n-icon>
                <n-space>已完成 {{ user.solved }} 题</n-space>
                <n-space>准确率 {{ user.rate }}</n-space>
            </n-space>
        </n-card>
    </n-space>
    <n-space style="margin-left: 7%; margin-top: 1%;">
        <n-input placeholder="搜索学号" style="width: 500px;">
            <template #prefix><n-icon><search-icon /></n-icon></template>
        </n-input>
        <n-button type="primary">搜索</n-button>
    </n-space>
    <n-data-table
        :columns="columns"
        :data="others"
        :pagination="pagination"
        style="margin-top: 1%; width: 85%; margin-left: 7%;"
    />
</template>


<script lang="ts">
import { defineComponent, h} from "vue"
import { Medal, SearchOutline as SearchIcon } from '@vicons/ionicons5'
import { NButton } from 'naive-ui'
import router from "@/router"

interface Row{
    rankNo: number;
    account: string;
    username: string;
    solvedProblems: number;
    rate: string;
}

const top3 = [
    { index: 0, name: 'Alice', account: '201904010101', solved: 340, color: 'gold', rate: "87.3%" },
    { index: 1, name: 'Bob', account: '201904010205', solved: 318, color: 'silver', rate: "82.8%" },
    { index: 2, name: 'Charles', account: '201904040222', solved: 288, color: 'copper', rate: "85.1%" }
]

const createColumns = () => {
    return [
        {
            title: '排名',
            key: 'rankNo',
            align: 'center'
        },
        {
            title: '学号',
            key: 'account',
            align: 'center',
            render(row: Row) {
                const btn = h(NButton, {
                    text: true,
                    onClick: () => router.push('/user/' + row.account)
                },
                    { default: () => row.account })
                return btn;
            }
        },
        {
            title: '姓名',
            key: 'username',
            align: 'center',
            render(row: Row) {
                const btn = h(NButton, {
                    text: true,
                    onClick: () => router.push('/user/' + row.account)
                },
                    { default: () => row.username })
                return btn;
            }
        },
        {
            title: '已通过题目数量',
            key: 'solvedProblems',
            align: 'center'
        },
        {
            title: '准确率',
            key: 'rate',
            align: 'center'
        },
        {
            title: '学号',
            key: 'account',
            align: 'center'
        },
    ]
}

const others = () => {
    return [
        {
            rankNo: 4,
            account: '201904020227',
            username: '陈可桐',
            solvedProblems: 199,
            rate: "77.7%"
        }
    ]
}

export default defineComponent({
    components: { Medal, SearchIcon },
    setup() {
        return {
            columns: createColumns(),
            others: others(),
            top3: top3,
            pagination: {
                pagesize: 10
            }
        }
    },
    methods: {
        link2User(account: string){
            this.$router.push('/user/' + account)
        }
    }
})
</script>